#HTML head Elements | Explore Tumblr posts and blogs

yan-lorkai · 1 month ago

Text

.⁠｡⁠*⁠♡ﾟ A/n: totally not trying to learn html (which technically isn't a programming language, for what I had read), and well, if Idia was teaching me I would learn everything so quickly tbh. Or not. He would start explaining and I would have the sudden urge to kiss him, oh well it happens ig

"Uh... I think I have an error in my code." You break the silence, tone soft as the computer screen lights up your eyes just the right way for Idia to lost himself in the reflex. He love your eyes, your concentrated face, the way you stick out your tongue without realizing.

And he loves the way you timidly look to him, as if he has all the answers to your questions - which, about this subject, he have, by the way.

"Ah~ your closing array is missing a closing slash. Here, Yuu-shi." He pointed your error with a soft tone, blue nail hitting the screen, and a surprised pout grew on your lips.

He wanted to smother you in his arms, to pick you up and hold you till his arms fell off and his corpse rot - that was how bad he yearned for you, your skin, you smell. He breathes really hard to refrain from doing it, though. You wouldn't want that. He was just a mere R card, a lonely gamer, a-

"Thank you, Idia. You're the best." You giggle to yourself, feeling yourself warm under his eyes and lousy smile. Unbeknownst to you, the only things that were going through his head were about you.

Your smile, the way your eyes lightened up, your laughters and giggles, the messages you passed each other in class (when he was there in person), your secret handshake. Idia loved you. He loved your very dearly.

He loved you so much that he could cry.

"Uh... it's no big deal," yet his hair was getting hotter, rosey tone starting to burn brightly. "Don't forget the closing stash, and everything should work properly. This programming language is not that used anymore, but most can learn useful things learning it anyway. I think."

Idia had half of his mind to know that he was rambling again, talking so fast that he could make Eminem cry. But he couldn't stop when you looked at him with such big eyes filled with curiosity and wonder, taking notes of everything he was saying.

He noted then that you had hello kitty stickers on your page. A few drawings that Ortho made of him, Idia and you; that almost killed him right then and there.

"Ah... HTML uses elements, tags, and attributes to organize text, images, links, and other multimedia elements. It can be combined with CSS for styling and JavaScript for interactivity."

#twst idia shroud #yandere idia shroud x reader #idia shroud x reader #idia shroud #idia x reader #idia x mc #yandere idia #twst idia #twisted wonderland idia #yandere idia x mc #yandere idia x reader #idia x yuu #idia x you #yandere idia x yuu #yandere idia shroud x yuu #yandere idia shroud x mc #yandere idia shroud

95 notes · View notes

study-diaries · 1 month ago

Text

Introduction To HTML

[Note: You need a text editor to do this. You can use Notepad or Text Edit. But it's so much better to download VS Code / Visual Studio Code. Save it with an extension of .html]

HTML stands for Hyper Text Markup Language

It is used to create webpages/websites.

It has a bunch of tags within angular brackets <....>

There are opening and closing tags for every element.

Opening tags look like this <......>

Closing tags look like this

The HTML code is within HTML tags. ( // code)

Here's the basic HTML code:

<!DOCTYPE html> <html> <head> <title> My First Webpage </title> </head> <body> <h1> Hello World </h1> <p> Sometimes even I have no idea <br> what in the world I am doing </p> </body> </html>

Line By Line Explanation :

<!DOCTYPE html> : Tells the browser it's an HTML document.

<html> </html> : All code resides inside these brackets.

<head> </head> : The tags within these don't appear on the webpage. It provides the information about the webpage.

<title> </title> : The title of webpage (It's not seen on the webpage. It will be seen on the address bar)

<body> </body> : Everything that appears on the webpage lies within these tags.

<h1> </h1> : It's basically a heading tag. It's the biggest heading.

Heading Tags are from <h1> to <h6>. H1 are the biggest. H6 are the smallest.

<p> </p> : This is the paragraph tag and everything that you want to write goes between this.

<br> : This is used for line breaks. There is no closing tag for this.

-------

Now, we'll cover some <Meta> tags.

Meta tags = Notes to the browser and search engines.

They don’t appear on the page.

They reside within the head tag

Line By Line Explanation:

_____

This is my first post in this topic. I'll be focusing on the practical side more than the actual theory, really. You will just have some short bullet points for most of these posts. The first 10 posts would be fully HTML. I'll continue with CSS later. And by 20th post, we'll build the first website. So, I hope it will be helpful :)

If I keep a coding post spree for like 2 weeks, would anyone be interested? o-o

102 notes · View notes

shehimin · 9 months ago

Text

Edgaring time!

Tutorial on how to make your own responsive Edgar :D I will try to explain it in really basic terms, like you’ve never touched a puter (which if you’re making this… I’m sure you’ve touched plenty of computers amirite??? EL APLAUSO SEÑOOOREEES).

If you have some experience I tried to highlight the most important things so you won’t have to read everything, this is literally building a website but easier.

I will only show how to make him move like this:

Disclaimer: I’m a yapper.

Choosing an engine First of all you’ll need something that will allow you to display a responsive background, I used LivelyWallpaper since it’s free and open-source (we love open-source).

Choosing an IDE Next is having any IDE to make some silly code! (Unless you can rawdog code… Which would be honestly impressive and you need to slide in my DMs and we will make out) I use Visual Studio!!!

So now that we have those two things we just need to set up the structure we will use.

Project structure

We will now create our project, which I will call “Edgar”, we will include some things inside as follows:

Edgar

img (folder that will contain images) - thumbnail.png (I literally just have a png of his face :]) - [some svgs…]

face.js (script that will make him interactive)

index.html (script that structures his face!)

LivelyInfo,json (script that LivelyWallpaper uses to display your new wallpaper)

style.css (script we will use to paint him!)

All of those scripts are just literally like a “.txt” file but instead of “.txt” we use “.js”, “.html”, etc… You know? We just write stuff and tell the puter it’s in “.{language}”, nothing fancy.

index.html

Basically the way you build his silly little face! Here’s the code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Face!</title> <link rel = "stylesheet" type = "text/css" href = "style.css"> </head> <body> <div class="area"> <div class="face"> <div class="eyes"> <div class="eyeR"></div> <div class="eyeL"></div> </div> <div class="mouth"></div> </div> </div> <script src="face.js"></script> </body> </html>

Ok so now some of you will be thinking “Why would you use eyeR and eyeL? Just use eye!“ and you’d be right but I’m a dummy who couldn’t handle making two different instances of the same object and altering it… It’s scary but if you can do it, please please please teach me ;0;!!!

Area comes in handy to the caress function we will implement in the next module (script)! It encapsulates face.

Face just contains the elements inside, trust me it made sense but i can’t remember why…

Eyes contains each different eye, probably here because I wanted to reuse code and it did not work out and when I kept going I was too scared to restructure it.

EyeR/EyeL are the eyes! We will paint them in the “.css”.

Mouth, like the eyeR/eyeL, will be used in the “.css”.

face.js

Here I will only show how to make it so he feels you mouse on top of him! Too ashamed of how I coded the kisses… Believe me, it’s not pretty at all and so sooo repetitive…

// ######################### // ## CONSTANTS ## // ######################### const area = document.querySelector('.area'); const face = document.querySelector('.face'); const mouth = document.querySelector('.mouth'); const eyeL = document.querySelector('.eyeL'); const eyeR = document.querySelector('.eyeR'); // ######################### // ## CARESS HIM ## // ######################### // When the mouse enters the area the face will follow the mouse area.addEventListener('mousemove', (event) => { const rect = area.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; face.style.left = `${x}px`; face.style.top = `${y}px`; }); // When the mouse leaves the area the face will return to the original position area.addEventListener('mouseout', () => { face.style.left = '50%'; face.style.top = '50%'; });

God bless my past self for explaining it so well, but tbf it’s really simple,,

style.css

body { padding: 0; margin: 0; background: #c9c368; overflow: hidden; } .area { width: 55vh; height: 55vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: transparent; display: flex; } .face { width: 55vh; height: 55vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: transparent; display: flex; justify-content: center; align-items: center; transition: 0.5s ease-out; } .mouth { width: 75vh; height: 70vh; position: absolute; bottom: 5vh; background: transparent; border-radius: 100%; border: 1vh solid #000; border-color: transparent transparent black transparent; pointer-events: none; animation: mouth-sad 3s 420s forwards step-end; } .face:hover .mouth { animation: mouth-happy 0.5s forwards; } .eyes { position: relative; bottom: 27%; display: flex; } .eyes .eyeR { position: relative; width: 13vh; height: 13vh; display: block; background: black; margin-right: 11vh; border-radius: 50%; transition: 1s ease } .face:hover .eyeR { transform: translateY(10vh); border-radius: 20px 100% 20px 100%; } .eyes .eyeL { position: relative; width: 13vh; height: 13vh; display: block; background: black; margin-left: 11vh; border-radius: 50%; transition: 1s ease; } .face:hover .eyeL { transform: translateY(10vh); border-radius: 100% 20px 100% 20px; } @keyframes mouth-happy { 0% { background-color: transparent; height: 70vh; width: 75vh; } 100% { border-radius: 0 0 25% 25%; transform: translateY(-10vh); } } @keyframes mouth-sad { 12.5%{ height: 35vh; width: 67vh; } 25% { height: 10vh; width: 60vh; } 37.5% { width: 53vh; border-radius: 0%; border-bottom-color: black; } 50% { width: 60vh; height: 10vh; transform: translateY(11vh); border-radius: 100%; border-color: black transparent transparent transparent; } 62.5% { width: 64vh; height: 20vh; transform: translateY(21vh); } 75% { width: 69vh; height: 40vh; transform: translateY(41vh); } 87.5% { width: 75vh; height: 70vh; transform: translateY(71vh); } 100% { width: 77vh; height: 90vh; border-color: black transparent transparent transparent; transform: translateY(91vh); } }

I didn’t show it but this also makes it so if you don’t pay attention to him he will get sad (mouth-sad, tried to make it as accurate to the movie as possible, that’s why it’s choppy!)

The .hover is what makes him go like a creature when you hover over him, if you want to change it just… Change it! If you’d rather him always have the same expression, delete it!

Anyway, lots of easy stuff, lots of code that I didn’t reuse and I probably should’ve (the eyes!!! Can someone please tell me a way I can just… Mirror the other or something…? There must be a way!!!) So now this is when we do a thinking exercise in which you think about me as like someone who is kind of dumb and take some pity on me.

LivelyInfo.json

{ "AppVersion": "1.0.0.0", "Title": "Edgar", "Thumbnail": "img/thumbnail.png", "Preview": "thumbnail.png", "Desc": "It's me!.", "Author": "Champagne?", "License": "", "Type": 1, "FileName": "index.html" }

Easy stuff!!!

Conclusion

This could've been a project on git but i'm not ready and we're already finished. I'm curious about how this will be seen on mobile and PC,,, i'm not one to post here.

Sorry if I rambled too much or if i didn't explain something good enough! If you have any doubts please don't hesitate to ask.

And if you add any functionality to my code or see improvements please please please tell me, or make your own post!

#edgar electric dreams #electric dreams 1984

98 notes · View notes

wip · 4 months ago

Note

Would it be possible to implement more options for the dashboard? For example, adjusting font sizes and font faces manually on the user end, not just via the themes available by default. I find a lot of people use <small> html tags and the text is too small for me to read, but could easily be fixed if I could bump up the font size for that. On that note, would it be possible to implement more html tags for text posts, like super/subscript, code text (in-line, not for the whole paragraph element), more colors and headings, etc.?

Thank you!

Answer: Hi, @acidcorrodes!

It’s a good question, but it is unlikely that we will be adding these kind of appearance options to the dashboard. That said, we will more than happily point you to some available third-party browser extensions to do the trick instead! For adjusting the font face and font size, for example, you might want to try out Palettes for Tumblr—or, if you’re comfortable writing your own CSS, maybe Stylus would give you the font freedom you’re yearning for.

On that note, would it be possible to implement more html tags for text posts, like super/subscript, code text (in-line, not for the whole paragraph element), more colors and headings, etc.?

It is a fact that there are several of us among Tumblr Staff who would love to see this as much as you. Sadly, this is the kind of thing that would take a full project team to properly implement across our web, Android, and iOS clients—and there are much more pressing issues for our development teams to address at the moment.

We hope this was enlightening! Please do keep the questions coming.

#feature #dashboard #ux #backend #your suggestions

42 notes · View notes

izicodes · 1 year ago

Text

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

#my resources #coding #codeblr #programming #progblr #studying #studyblr #programmer #html #html css #javascript #neocities #coding tips #html5 tutorial #html tutorial

155 notes · View notes

punk-nothing · 5 months ago

Text

Started writing a Choose-Your-Own-Adventure sequel to Disco Elysium starring Cuno. Written in the style of the source material with some game elements.

The first entry features a tutorial, a list of Cuno’s skills that you spec into and the first proper chapter.

If anyone feels like checking it out that would be neat. Figuring out the CSS / HTML for the work skin made me want to drill a hole in head, so please don’t turn off the creator style lmao

#disco elysium #cuno #kuuno de ruyter #harry du bois #ao3 #archive of our own #fanfic

33 notes · View notes

beckyh2112 · 5 months ago

Text

Chat Snippets, part 6

I think I'm all caught up now, thankfully.

[Bex]: Shoot him, SF dude! Shoot him while he monologues! [Rin]: DBZ RULES, BECCA. TALKING IS A FREE ACTION.

[Bex]: I kind of love the trope of Bofur and/or Thorin trying to court Bilbo in the dwarven way, and him just being oblivious. [Kat]: Heeee! Yes. Until Balin slides into the frame and translates. [Bex]: Yes. [Bex]: Thorin: *offers to braid Bilbo's hair* Bilbo: *actually, I really need to get it cut, I've let it get too long* Thorin: D: D: D: *dejected puppy* Bilbo: … *what?* [Kat]: LOL [Bex]: Thorin: *he'd rather cut his hair than let me touch it, I haven't been rejected that hard in decades* [Kat]: And Bilbo's just all "man, it's getting in my face."

[Bex]: http://protowilson.deviantart.com/art/Christmas-Pyro-Style-342453578 [Sam]: Stars are MADE of fire. [Scott]: And they also sit on the top of trees, because this is all about authenticity [Ra]: one of those nights. [Liona]: I don't know about you, but every winter in Canada we climb the northern lights up into the cosmos to pick stars to bring home and put on our trees.

[Bex]: And here, Lex is using his robots to punch Superman. [Rin]: let's all be honest, how many DECADES of advancements in the field of robotics in the DC'verse exist solely because Lex Luthor wanted ones that could punch Superman?

[Bex]: HAZE. [Bex]: HAZE THERE ARE NINE SAILOR SENSHI. [Haze]: huh what [Haze]: yes [Haze]: nine planets [Haze]: nine sailors [Bex]: NINE TF2 CLASSES [Haze]: ... [Haze]: WELP

[Charles]: I have been watching 70s Who's Frontier In Space. it warns us of a nightmarish dystopia, where all buildings will look like 70s-modern concrete ones! [Charles]: oh, and war and stuff

[Bex]: http://bossymarmalade.dreamwidth.org/492768.html -- This seems quite cool. [Kep]: Quicksilver = awesome [Kep]: OMG! Vanessa Williams as Emma Frost? HELL YES! [Kep]: HELL to the YES! [Kep]: Yes, to the power of Hell.

[Bex]: As Pyramid Head thrusts his sword repeatedly into the small space where the two women are hiding. [Tai]: WHAT DO YOU MEAN "FREUDIAN SYMBOLISM" I DON'T UNDERSTAND

[Pux]: There is probably also an element of the fact that she knows Olorin and Curunir far better than pretty much anybody else left in Middle Earth, having potentially known them back in Valinor (and most of the other remaining Noldor to have had the opportunity to do so having either left already, died, or been born in Middle-Earth like Elrond was), so she knows that Olorin/Gandalf is probably wiser and thus more trustworthy of testimony than Curunir/Saruman (the former having apprenticed under the Vala of Mercy and Wisdom, the latter under the Vala of the Forge, to say nothing of Olorin's overly modest and humble tendencies and Curunir's overlarge ego meaning Olorin is more likely to fail to bring up something relevant than to bring up something incorrect and Curunir is likely to dismiss something relevant if he isn't involved). …..words? [Bex]: Galadriel might have known Gandalf and Saruman back when they were angels. [Pux]: Thank you.

[Bex]: I have the best plasmid in Rapture. [Ra]: beeees? [Ra]: :D [Bex]: BEES! [Ra]: /BROFIST

[Bex]: Silent Hill's tendency for gaping holes instead of streets speaks of a need for a better highway dept. [Pux]: Or tax revenue to be shunted to the roads. [Bex]: Yes. [Pux]: Somehow, I doubt the creepy cultists pay taxes. [Bex]: They are terrible citizens. [Pux]: Yes. [Pux]: They steal gods from the Aztecs, they don't pay their taxes, they steal little girls….

[Bex]: As an aside, if you ever ask me to come get you from Silent Hill, I'm not going to. [Charles]: no, that's fair [Pux]: If I ask you to come get me from Silent Hill, I deserve what I get for being there.

[Charles]: speaking of, I like the World War Z trailer where, thanks to fast zombies, it's hard to tell who are the zombies and who are the people running from zombies [Charles]: once I noticed that very few of the extras look scared, it seemed like the zombie outbreak happened during a marathon and that's why nobody noticed for so long

[Charles]: one of our heroes is a vampire who is out for redemption over those murders he did [Charles]: except he did his last one a fortnight ago [Bex]: … you need to work on that not-murdering people thing. [Charles]: that's what the other characters said [Charles]: in slightly angrier terms

[Bex]: "Something dangerous is going on, and I'm going to regret getting involved in it." There's still time to back out, Jay. [Kep]: ….he actually said that? [Bex]: He actually said that. [Kep]: Dumbass walking! People, dumbass walking!

[Haze]: Clearly, Perceptor talks Springer into playing Strip DnD. [Haze]: Or something. [Ra]: ….strip….DnD…. [Ravyn]: yar. [Ra]: ….. [Liona]: I ROLL TO KEEP ON MY PANTS. [Haze]: MEANWHILE, I DO NOT BOTHER TO ROLL, FOR PANTS ARE A RESTRICTIVE TOOL OF THE MAN

[Bex]: …. you are in Silent Hill and you've found a bloody dagger with a pomegranate design on its hilt. [Pux]: …. [Pux]: GET RID OF IT [Pux]: BURN IT [Pux]: DESTROY IT [Pux]: CAST IT INTO THE FIRES OF MOUNT DOOM

[Bex]: So when all the horrible lights and alarms go off, are we surprised the alien goes to the one quiet place left on the ship? [Charles]: nah [Charles]: should we also be surprised it leaps on people when they drop in front of it in ducts? [Bex]: Nope. [Charles]: we don't know it's being hostile there [Charles]: it could be going "OH SHIT!!!" [Bex]: Yes. [Bex]: Especially since the man is carrying a flamethrower. [Charles]: it DOES scream

[Bex]: http://25.media.tumblr.com/tumblr_m7vyp1RvTN1qes8iso1_r1_500.png -- Apparently, "one of the chracters goes crazy/mind-controlled/whatever" is story-nip for me. [Pux]: I am shocked. [Pux]: SHOCKED. [Pux]: There is gambling in this establishment.

[Bex]: You are holding your beatstick the wrong way, police-lady! [Rin]: this is the FUTURE, Becca, you are thinking of the antiquated form of nightstick-fighting where you can actually hit people effectively

[Charles]: I think the only way to avoid "Ming the Merciless is kinda racist isn't he?" issues is to cast a Chinese dude and have him act as a standard villain and just bull ahead with grim abandon [Charles]: "HE JUST IS CHINESE ALRIGHT" [Charles]: "You never bitch about the nutjob scientist with the Germanic name!" [Bex]: They should make Buck Rogers Chinese too. (Or is it Flash Gordon? Whichever one it is.) [Charles]: Flash Gordon [Charles]: or Dale Arden [Charles]: (the Woman) [Charles]: (I joke, there were two women) [Bex]: Ming's daughter! [Charles]: Yes! [Charles]: it's strange, but despite her being all Evil Sex All The Time in the strips, serials, and film, she's totally not like that in the kid cartoons [Charles]: I wonder why [Bex]: *snickers* [Bex]: Anyways. [Bex]: Make everyone Chinese. [Charles]: fuck, make the whole of Mongo's humans Chinese [Charles]: THEY ALL LOOK LIKE THAT JUST COS [Charles]: and when someone questions it, Flash goes "bitch, there are lion-men and fat British guys with bird wings here"

[Liona]: Well, there was a Rubix cube cartoon. :V [Sam]: There was not. [Ra]: There was. [Sam]: I refuse to believe that, even if it is true.

(re: "The Night Land") [Spyri]: There are good parts and I slow down, and then there are 'I ate pills. I slept. I walked for 40-goddamn-hours and ate MORE pills.'

[Bex]: http://i205.photobucket.com/albums/bb49/mervin_storage/new%20moon%20macros/geode1.png -- I want this chair. So I can sit in it. And be evil. [Neld]: That is a magnificent chair to be evil in. [Neld]: In fact, I think just by sitting in it, you become 50% more evil. [Neld]: If Voldemort sat in that chair, he would probably be unstoppable.

[Pux]: Why anyone would build near Silent Hill…. [Bex]: They apparently originally came from Silent Hill. [Pux]: ….. [Pux]: WHY WOULD THEY NOT BUILD ON THE OPPOSITE SIDE OF THE PLANET

[Scott]: …they seriously promoted Battleship by saying "From Hasbro, the people that brought you TRANSFORMERS" [Bex]: Yep! [Scott]: I want to see them promote a Furby movie the same way. [Scott]: Including those same sound effects. [Scott]: BWAAAAAHM [Bex]: Bwaaaaahm [Luna]: Promote My Little Pony: A Real America Stallion like that. [Ra]: XD XD XD [Ra]: Or Monopoly. [Luna]: Rainbow Dash flies by, BWAAAAAHM. [Scott]: Fluttershy gets scared of her own shadow, BWAAAAAAHM [Luna]: YES [Ra]: XDDD [Scott]: Monopoly could be the tale of some young business person at the start of a promising career who just won second place in a beauty contest, BWAAAAAAHM [Luna]: They are making a Monopoly movie. [Jess]: … [Scott]: I see a harrowing shot where the protagonist is arrested by police who read them their rights. [Scott]: "Do not pass go.." *slams head on bonnet* "Do NOT collect $200." [Jim]: ahahaha [Jess]: Sure, why not. The world needs another tale of a scrappy shoe who makes it rich by buying all available property and then increasing rent beyond the ability of anyone to afford, thus turning people out onto the streets. … Much like the real world, really. [Scott]: Elefun: The movie. [Scott]: A giant alien elephant floats over anycity, America, launching multicoloured butterfly-shaped invaders from its trunk, BWAAAHM [Luna]: OUIJA [Luna]: BWAAAAHM [Jess]: Ouija has a lot of potential as a horror movie. I mean, given the number of screwy stories that get told about it… [Scott]: Or or how about this. [Scott]: An espionage thriller where terrorists have segments of a bomb that they are trying to assemble. [Scott]: Any segment is a quarter of a fully usable bomb. [Scott]: And someone in the CIA says "We have to stop them… from connecting four." [Scott]: BWAAAAAAAAAAAAHM

#bextalk #chat logs

10 notes · View notes

kitkatt0430 · 10 months ago

Text

Instead of doing a Six Sentence Sunday today, I think I'll do a short tutorial on copying over fanfic from FFnet to Ao3.

So you've got some old fics on FFnet and you'd like to back them up to Ao3, given the instability of FFnet. And for whatever reason you don't have the original files for the fics, or maybe you have edits to the FFnet versions that you don't want to lose that the OG files don't have. Whatever the reason, you're looking to directly copy over your fic from FFnet to Ao3. And you're looking for a relatively easy way to do so, but Ao3's import functionality doesn't work with FFnet web pages.

Never fear! It's actually a fairly easy process to get your fic copied over from FFnet.

First, head over to FFnet and open up the fic you want to port over to Ao3. You don't need to log in if you don't want to, just so long as the fic in question is yours and you can access the page, then you're good.

In a separate tab, open Ao3 and login, then choose the option for posting a new work.

Now back on the FFnet tab, you should be able to directly copy over the title, summary, fandom, and what little tagging was available on that site onto the relevant Ao3 fields in the tab you have for a new fic. You'll also want to take note of the published date on FFnet and back date the new work in the Ao3 tab.

FFnet may not have a lot of useful tag data, but it's pretty easy to replicate and build off that in Ao3.

Now for the hard part. Which is still pretty easy. Getting the fic body, plus any notes in the fic itself, copied over to FFnet.

While getting around FFnet's lockdown on the text of the fics they host is fairly simple - I'm pretty sure it's entirely css based - you don't really need to do that in order to get the body of your fic copied. And, honestly, even if you do have a work around in place to allow copying of the fic's text... you will probably find the following method a lot easier still.

In the body of the fic, right click the first line of the fic, which should bring up a menu with a bunch of options. On Firefox or Chrome you want the inspect option.

This'll bring up the dev tools with the html inspection tab open and, if you give it a few seconds to load, the specific line you right clicked to inspect should become the visibly selected section of the html.

The selected section of the html should be a paragraph (or <p>) element. You're going to want to right click the div (<div>) element that encapsulates that paragraph and the rest of the paragraphs in the fic body. This'll bring up another browser menu with the option to copy, which will bring up a flyout menu when you select it. From that flyout menu, you want the select the option for Inner HTML.

You have officially copied the html for the fic body. And you can dump that entirely in html format straight into Ao3's html work text editor. Then switch it to rich text for easier editing if you want to fix any spelling, grammar, formatting, or aesthetic issues. I typically try to fix at least the line breaks since it took a long while before FFnet adopted real line breaks and so there are a lot of fics where I have various combinations of dashes, em-dashes, equals signs, and other characters as line breaks. I figure, if I'm bringing the fic to Ao3 then I can try to make it more screen reader friendly in the process.

You can also move fic notes around in order to move pre/post fic notes out of the fic body or basically whatever you want to the fic. Maybe re-read it to determine any additional tagging you want to add now that your fic has access to Ao3's much more robust tagging system.

But that's it. You can hit post and have your fic with all it's original notes, and a back dated post date to reflect when it was actually written, all available on Ao3 now.

It's a pretty quick process, all told, and the only real bottleneck you might encounter is any time spent in re-editing the fic between migrating and posting. Even chaptered fics are fairly easy to migrate with this process, since the bulk of the work in publishing a new chapter is just copying the inner html and then moving any notes to the appropriate location before hitting post.

Anyway, for my fellow fic writers looking to move your old FFnet fics to a more stable archive, I hope this process helps a lot.

#kitkatt0430 rambles #fanfiction archiving #migrating from fanfiction.net to ao3 #ao3 #ffnet #fanfiction.net #tutorial

13 notes · View notes

irlmaeda · 9 months ago

Note

Hiya! I found your blog through your neocities website! I was wondering if there’s any tips or things you read/watched that help you make your site. (Im heavily considering making one of my own neocities site it just seems fun)

hihi welcome !! i have quite a few pieces of advice, but the tldr is you should come up with an idea for what you want to make beforehand, and look up how to do each piece! your knowledge will start to fill in along the way :]

(this is probably gonna be long as hell so under the cut is all of the fun stuff /silly)

the way i personally started off was by sketching out what i wanted my site to look like! if you know what you want before you begin, you'll know where to look to figure out what you need to do. html+ css are extremely easy languages to read/write once you know what to look for!

^ this was the original sketch for my site, where i planned out everything i wanted to include. it's a bit different from what actually ended up on the site, but that's alright! it's just about having an outline to work from. i think of it like outlining before you write, it feels like such a pain in the ass because u just wanna start working NOW but u will thank yourself later for taking the time to plan.

once you know what you want to make, start looking for tutorials and resources to make it easier! the grid for my homepage and some of my other subpages was made using a css grid generator, since its one of the more confusing bits of css. you can make grids without it, but its a very easy way to make a more asymmetrical design if ur using the generator!

thats linked here, it gives you some css to put in your head or css sheet, and then the html for the different boxes to slap in your main document. it can be easier to understand what itll look like if you give each one a border while you work, even if its just temporary!

when looking for information about css and html, w3schools is your best friend. its a pretty comprehensive database of every little piece of html + css you could ever need, with examples you can play with yourself to understand what each variable does! it's been a lifesaver for me, ive watched basically zero video tutorials because everything on there is explained so well and you can find basically Anything.

they even have code snippets for things that take more than one or two lines of code, which you can use and adapt yourself! (the tooltips on the official art + my art sections on the hinata shrine were adapted from a tutorial on there!)

in general, having a plan and working from there will make ur life so much easier. the pages that ive sketched out beforehand or ive had a very clear vision for have been WAYY easier to code than the ones i tried to come up with on the fly, and ive been much happier with how they've turned out as well. though i do also have some smaller, rapidfire tips as well that ill go thru now!!

— inline css (the style="" tag) seems so so useful but really should only be used when you're resizing images like buttons. when u keep all of your css in the head or in a seperate document, its way easier to debug and read later. i cleaned up my homepage recently by removing all of the inline css and looking at the code stresses me out WAY less because i can actually read it LOLOL ... plus cutting the css out and putting it in its own document made me realize that id accidentally wrote some really weird code in some places

— this is very much 'do as i say, not as i do,' but use an external editor (like visual studio code) instead of editing live on neocities! you can set up a live preview, and generally wont be pushing out 100 updates every single time you change or add something. i tend to code directly on neocities but its a bad habit and i want to break it eventually v_v

— if you really like an effect someone else has on their site, you can peek using inspect element i promise the coding police won't get you !! dont steal code line for line, but you can figure out what theyre doing and put your own spin on it. things like border images can be really cool, and i only figured out about them because i looked at what someone else was doing and figured out how to adapt it for my own site! check linkbooks and credit sections as well, a lot of people will include links to any effect they didnt make themself or got help with. (including me! the credits section of the linkbook has a ton of little things i got from other places, including a really neat little music player, the rss feed for my status cafe, and the wobbly text on the homepage!)

— most stuff in html and css basically just... says what it does in the tag. so looking stuff up for it is extremely easy! if you've used carrd before you honestly probably already know more abt html than u'd think just intuitively. when ur adjusting the margins or padding in carrd, you're adjusting the margin: and padding: properties in the css of the website it's outputting!

this is getting way too long but!! my best advice is to just get started. you'll never be able to learn without trying, and it genuinely is so fun to have something that's truly your own!

(if u have any specific questions im happy to answer anytime as well! i love talking abt neocities, its a super fun hobby and way easier to pick up than u would think!)

#originals.txt #inbox.txt #neocities.zip #god im so sorry abt how long this is i havent had time to work on the site for a while and its getting to my head /silly

6 notes · View notes

fearoffun · 2 years ago

Note

hi there!! there isn’t a need to publish this ask I literally just am so curious if you had any resource or tutorial regarding your neocities! I’m sorry if this is so out of the blue but I saw your site and really adored the layout!! I’m specifically just wondering about the method you used for your blog posts - I’ve found some recommended ways to do it but i feel like yours is integrated really well imo :) also if you’re not comfortable answering or anything that’s totally fine lol pls don’t feel obligated. lastly your art is so gorg!!!

i'm finally going to answer this ask...!! it's going to be a very long read so i'll keep it all under this cut

i know you are specifically curious about the blog posts page but i figured this was a great time to thoroughly explain my website layout too since i had another person asking about it (i'll put that at the bottom though) :D

please bear with me btw because i... i have never made a tutorial like this before LOL

blog posts guide

1. scrollbox

i made a super low effort format for my blog entries. i honestly just wanted it to be a super simple scrollable box with all of my entries being in one general place. CSS to do this, i created an all encompassing <div class> that had the styling property of overflow.

fyi, i also added a <div class> within the scrollbox class that would handle the padding but TBH i'm not sure... i needed to make an entire class for that LOL REFERENCES - scroll box

2. date & time

HTML ok honestly i just used a <p> element and made it bold....

3. images (optional)

HTML i don't always attach an image to my entries but when i want to, i use this <div class> that sits below my date & time. i style it with an <img class> that i created and add an <alt text> too to make it more accessible!

CSS this is what the <img class> looks like. i like my images centered and on their own "line."

4. status

HTML again, another <div class> specifically made for the status. i just made the font size smaller to visually differentiate it from the actual entry itself.

5. blog entry text

HTML my blog entries are simply typed up between <p> tags and i use <br> to start a new line... it literally just looks like this LOL....

THAT'S ALL...>!!!!!! :)

website guide

1. general page layout

HTML in order to establish where i want all of my blog's content to lie, i created a <div class> specifically to store it all.

CSS the styling for it is pretty simple! just setting a max-width to limit the size of everything that will be in it and also centering the page with the margin.

2. sidebar

HTML my sidebar just comprises of a heading tag and navigation links.

CSS this is all personal taste aside from the fixed position

REFERENCES - fixed sidebar - responsive sidebar

3. main content

HTML because everything is stored in the <div class="content">, the sidebar and the page contents are limited to the constraints of the it.

that is all pt. 2...... bless <3

#THANK U FOR ASKING BTW!!!!#it brings me so much joy when people ask me . things and i then get to answer these things #i am so sory if this is somewhat incomprehensible or a pain to read through IF YOU HAVE ANY NEEDS FOR CLARIFICATION... JUST ASK ME..!!!!#textoffun #inbox

32 notes · View notes

wipbigbang · 11 months ago

Text

Round 2 Of Artists Claims For The Regular WIPBB Are Open! Round 2 lasts until July 31st! You may claim 3 fics this round!

This is one of the fics open for claiming...

Stranger Things #110 Title: Put me together again Pairing/Characters: Steve Harrington/Eddie Munson Rating: Explicit | E Warnings/Tags: Graphic Violence, Non-con/Rape Forced Prostitution, Alternate Universe - Police, Age Difference, Eddie Munson is a journalist, Steve Harrington is a boss's whore, Dead Dove: Do Not Eat, Implied/Referenced Character Death, Prostitution, non consensual pet play, Rape/Non-con Elements, Drug Dealing, Medical Examination, Dark Steve Harrington, Dark Tommy Hagan, ExJunkie Eddie Munson, Alternate Universe - No Upside Down (Stranger Things), Alternate Universe - 2000s, improper use of a gun (because there is a proper one?!), no underage even if it may seems so, Daddy Issues, Boot Worship, Vomiting, Organized Crime, Crimes & Criminals, Murder, Forced Feminization, Bad BDSM Etiquette, Impact Play, Anal Plug, Homophobic Language, Attempted Murder, Drug Use, Date Rape Drug/Roofies, Non-Consensual Drug Use, Suicide Attempt Summary: Three years ago, Steve's life changed for the worse. His father died, and his mother started to use drugs and became one of Tommy "The Butcher" Hagan's whore. Trying to survive and to keep his little brother, Dustin, out of the drug lord's hands, Steve is forced into prostitution. One night, he meets Police Officer Jim Hopper, who is investigating Hagan, and the ex-journalist Eddie Munson, who is seeking revenge against Hagan for personal reasons. Is Steve the key they were looking for?

#111 Title: Sing if You're Glad to be Gay Pairing/Characters: Eddie Munson / Steve Harrington Rating: Explicit | E Warnings/Tags: Graphic Violence dubious consent, period-typical homophobia / homophobic language, explicit relationship between 17 year old and 18 year old, suicidal ideation, bullying Summary: August, 1983:

Steve Harrington -- the man who would be king -- fell from the gentry's grace at the inaugural jock party of Eddie's senior year after Carol Perkins and Melissa Cargill caught him sucking off Tommy Hagan in the senior Harringtons’ suite. The Saturday soiree went from giving head to getting heads rolling as the coup d'etat kicked off. The moral majority had found Harrington on his knees, and they intended to keep him there. There was no forgiveness from his former friends; there was no atonement allowed for knowingly and willingly performing such an evil act. He was expelled post-haste from the sanctimonious sanctum of Hawkins’ high school high society.

Months before Will Byers disappears, Steve Harrington is outed, bullied, and shunned. Eddie would be overjoyed to find another gay kid in Hawkins if it wasn't THAT gay kid.

#112 Title: Pairing/Characters: Scott Clarke/ Wayne Munson Rating: Mature | M Warnings/Tags: Chooses not to use Warnings Graphic description of past injury Summary: After Wayne Munson gets a severe head wound in the war, he's sent home to deal with the aftermath. Between survivors guilt and the never-ending struggle to do day to day tasks, Wayne finds himself falling for the physical therapist making house calls.

Scott Clarke is fresh out of school and eager to prove himself as a resident, but when one truly difficult case comes across his desk, he can't help but try and make things just a little easier for Wayne. Even if that means going to his home for therapy visits rather than forcing him into the office.

The list of remaining fics and the link to sign up are below!

#signal boost #looking for an artist #stranger things #steddie #steve x eddie #eddie x steve #scott x wayne #eddie munson #steve harrington #scott clarke #wayne munson #wip big bang

6 notes · View notes

the-bjd-community-confess · 2 years ago

Text

Hello, Anon, this is your Oldie Chinese Diaspora Anon™️. I am sorry to keep you waiting. As you’ve probably noticed, vinyl and non-resin dolls are usually not my forte. It took a while to dig up some information for you, but I hope to be able to answer your questions.

The advent of “Cheaper, affordable MJDs” didn’t come from the desire to make BJDs affordable. In fact, the technology that really elevated the production of this kind of MJDs started from what we understand as vinyl collectibles. These small figurines are made from a combination of PVC powders as well as a series of other emulsifiers, lubricators and activators (From the factory that produces them, here: http://www.dgzhonglinhb.com/news_content-859681.html ) Different companies have slightly different recipes, which would explain the different pliability of their final products. The technology was first created as a way to create memorabilia that are of limited edition and they were first considered as collectibles. They’re known internally as “Urbanvinyls” and include signed trinkets that can go for hundreds, if not thousands of dollars. Some examples would be KAWS, Kidrobot, Tokidoki, Bearbrick etc.

With the rise of “Made in China” soft power, the internally patriotic sentiment had fostered local artist-designed vinyl collectibles, which had eventually ballooned into the blind box craze that we see in the last 4-5 years. It also opened a door for vinyl/PVC based MJDs. I do not think they were specifically made to usurp the DD/SmD market, but since “moe sells”, a lot of the new doll companies go with the cute, anime-inspired aesthetic while the blind boxes cater to more design elements. These newly designed MJDs tend to be small, usually 1/12 and 1/6; larger ones exist, but they are rare. In all, they are created to be much more like their direct inspiration, the “blind box collectibles” than what we would usually consider to be articulated dolls. It also meant their target demographic is very different as well. The lower price point allows more people to impulse buy out of FOMO; these are things you buy on a whim instead of saving up to buy.

In this arena, Imómó is not alone in terms of aesthetic, pricing or packaging. Other companies in this group include Hüa Jüan, Tïny Fóx, UFdóll, CNDóll, Kimdóll, Pópmilk, Mónst and the upcoming YünLai/LückyDoll, etc (but not YMY – who has lost a battle with Piccodo for copying their body design recently). These dolls are created with a higher number in circulation in mind – but still limited enough to stimulate the FOMO behaviour – with shared features (sharing bodies, design elements, etc). To keep the production cost down, these dolls would be considered rather threadbare compared to BJDs. I have seen box opening videos where the floating “blind box” heads were packaged in a brown shipping box and wrapped around in clear plastic bags with no other packaging material. The “accessories” for these dolls are usually close to none as well – no or very simple COAs, basic box, air-filled tubes instead of fabric cushions, etc.A snapshot in time in online stores shows that Imómó is definitely not an outlier in the new era of MJDs: https://weibo.com/1448114577/Nj9fqfog3

https://www.dollyteria.com/product-list/58?page=1

If there’s something that really made Imómó stand out, it was the rumours that spread within Chinese doll collectors earlier in the summer of 2023 about the company not issuing legitimate receipts (usually with the intention to cook their books to pay less in taxes). They accuse Imómó of being a “Three Nothings” company (no date of manufacture, no QC and no source factory) with really awful customer service. They had registered the company as an “overseas-based” one so they would be in a different tax bracket. Some collectors also accuse the owner and their family members infiltrating doll collector groups to hype up their own products and downplay the complaints. A popular agent, SWDólls, were also implicated in helping them to not issue traceable receipts. (Details and screen grabs can be found here: https://weibo.com/7303299294/N8lHE6wGE?type=repost ) I have also heard of owners who complain about the parts not fitting well, the seamlines were wide and uneven as well as other imperfections that should’ve never passed QC, if there was a QC.

I understand that most of us, who are looking in from the outside, would wholly welcome a new era of articulated dolls that are affordable. They are a great entry point for people who want to get into BJDs or just want to collect these dolls on their own. I personally think they are great the way they are, because they are starting to populate a brand-new market for people who like dolls in general. However, the first company that most folks encounter in this group was probably Imómó. I cannot comment on the accusations made by the Chinese collectors; all I can say is, I am hoping that the other named companies start to make headway into the overseas market. We’d been waiting.

Note: The write up here didn’t include previously existing vinyl dolls such as Azóne and Obitsü or the vinyl versions of resin dolls such as Kinókó Jüice and Püyüdolls. This write-up only includes MiC, PVC-based, original, MJDs. My understanding is that they are not on par with the company in question in terms of price range, target market and country of origin. I didn’t think they’d make for a fair comparison, but your mileage may vary.

~Anonymous

#BJD #ABJD #BJD Confessions #Community Confessions #MJD #blindbox #HJD #Other Dolls #Knowledge Anon

28 notes · View notes

study-diaries · 1 month ago

Text

Day 3 [Table In HTML]

Day 1 [Introduction To HTML]

Day 2 [Multimedia Elements In HTML]

Line by line explanation:

Defines a table,

border : This attribute adds a simple border to the table.

style : Used to add some styling to the webpage. Can be used with any tag.

Border spacing: Adds space between table cells.

Text-align : Aligns the text in the table.

Contains the header section of the table.

Represents a table row

Represents a table column

Holds the body of the table → main data (menu items).

Used for individual data cells in the table.

<table> <thead> <tr> <th> Column Head 1 </th> <th> Column Head 2 </th> </tr> </thead> <tbody> <tr> <td> Row 1 Data = Column 1 </td> <td> Row 1 Data = Column 2 </td> </tr> </tbody> </table>

Final Output

------------------------------

Hope it helps :)

8 notes · View notes

quietmarie · 2 years ago

Text

Anyone can program (yes, even you)

"Programming is easy"

I saw some variations of this statement shared around the site recently, always in good intentions of course, but it got me thinking.

Is that really true?

Well it certainly isn't hard in the way some developers would want to make you believe. A great skill bestowed only upon the greatest of minds, they're the ones making the world work. You better be thankful.

That is just elitist gibberish. If anyone ever tells you that programmers are "special people" in that way, or tries to sell you on the idea of "real" programmers that are somehow better than the rest, you can safely walk in the other direction. They have nothing of value to tell you.

But I think the answer is more complicated than a simple "Yes, programming is easy" too. In all honesty, I don't think it's an easy thing to "just pick up" at all. It can be very unintuitive at first to wrap your head around just how to tell a computer to solve certain problems.

One person in the codeblr Discord server likened it to cooking. That's a skill that can be very hard, but it's also something that everyone can learn. Anyone can cook. And anyone can program.

I really mean that. No need to be good at maths, to know what a bit is or whatever it is people told you you need. You're not too old to learn it either, or too young for that matter. If you want to start programming (and you can read this post), you already have everything you need. You can write your first little programs today!

One of the cool things about programming is that you can just fuck around and try lots of stuff, and it's fine. Realistically, the worst thing that can happen is that it doesn't work the way you imagined. But you'll never accidentally trigger the fire alarm or burn your house down, so feel free to just try a bunch of stuff.

"Okay I want to learn programming now, what do I do?"

That's awesome, I love the enthusiasm! As much as I'd love to just give you a resource and tell you to build a thing, you still have to make a choice what you want to learn first. The options I'd recommend are:

Scratch: A visual education tool. The main advantage is that you don't have to worry about the exact words you need to write down, you can just think about the structure of your program. The way it works is that you drag and drop program elements to be executed when they should be. You can relatively quickly learn to make cute little games in it. The downside is that this isn't really a "professional" programming language, so, while learning from Scratch will give you the basics that apply to most languages and will make switching to another language easier, you're still gonna have to switch sooner or later. Start here: https://scratch.mit.edu/

Python: The classic choice. Python is a very widely used, flexible programming language that is suited for beginners. It is what I would recommend if you want to skip right to or move on from Scratch to a more flexible language. https://automatetheboringstuff.com/ is your starting point, but there's also a longer list of resources here if you want to check that out at some point.

HTML/CSS/JavaScript: The web path. HTML and CSS are for creating the look of websites, and JavaScript is for the interactive elements. For example, if you ever played a game in your browser, that was probably written in JS. Since HTML and CSS are just for defining how the website should look, they're different from traditional programming languages, and you won't be able to write programs in them, that's what JS is for. You have to know HTML before you learn CSS, but otherwise the order in which you learn these is up to you. Your JavaScript resource is https://javascript.info/, and for HTML and CSS you can check out https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web.

I put some starting out resources here, but they're really just that - they're for starting out. You don't have to stick to them. If you find another path that suits you better, or if you want to get sidetracked with another resource or project, go for it! Your path doesn't have to be linear at all, and there's no "correct" way to learn things.

One of the most important things you'll want to do is talk to developers when you struggle. The journey is going to be frustrating at times, so search out beginner-friendly coding communities on Discord or wherever you're comfortable. The codeblr community certainly tends to be beginner-friendly and kind. My DMs and asks are also open on here.

#programming #is that a motherhecking RATATOUILLE reference??!?#codeblr #coding #the only reliable predictor of whether someone can be a good programmer is whether they have or can develop a passion for programming #how did me thinking “well is programming actually easy" turn into a resources post uhm #coding resources #shoutouts to the codeblr discord they're coo #long post #Most good programmers do programming not because they expect to get paid or get adulation by the public; but because it is fun to program #- Linus Torvalds

24 notes · View notes

theplayer-io · 4 months ago

Text

So I know how to code websites now, but idk how to upload it to the internet. My plan is to give you all a post that will update with a string of code to sort of visit the website(s?) that I am curating. I will reblog a post that had the original, and include a more patched version as time goes on. I am so sorry in advance.

Because of this.... Lemme show you how html and css works!!

For Project Our Realities, it will all be in html and css since that's what I'm learning so far. JavaScript will be included later.

HTML and CSS basics below!!

HTML, or Hyper-Text Markup Language is the basics of coding a website. It describes how a website will look. It unfortunately doesn't get you too far in terms of digital design, which is why we have languages like Css and javascript.

All HTML files start with <!DOCTYPE html>. This declares to the file that you will be coding in html rather than something like lua.

Each HTML file, after declaring it as an html file, starts with <HTML> and </HTML>. To end a tag, you must close it by adding a forward slash before writing its name (unless it is <br> or <hr>, or similar).

The <head> tag lets you add a title (silly little tab name), a favicon (silly little icon next to the name of the tab) and ways to link your CSS to the HTML.

An HTML file will look like this <!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In the body, you can write the rest of your page, using headers (<h>/<h1-6>), paragraphs (<p>), and even forms (<form>).

CSS, also known as Cascading Style Sheets, is a type of coding language that is often used to create websites. No, it is not C++.

Rather than <>, CSS uses brackets {} to code.

CSS is used to style html websites, so it addresses html tags and lets you style their appearance. There is something known as inline CSS, where you can use the <style> tag to style something in your HTML file. HTML was never meant to have colors in its code, but you can change the color of text with inline css. Let's say you would like to style a header.

In your HTML file, it would say:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1> My first header!!! :> </h1>

</body>

</html>

Now that we have our header, let's turn it red.

In your CSS file, it should say...

h1 {

color: red;

}

The H1 addresses that it will select all h1 elements. The code in the brackets shows that all those addressed will be the color red.

CSS has no starting or finishing lines, all elements will by stylized with {}.

To create an HTML file, you must end it with .HTML

To create a CSS file, you must end it with .css

Sometimes, when I create a link for the Css, the required name for the file will be in the HTML code already. Make sure that both files are in the same folder, and not one in a different folder within the same parent folder. This will not work.

Wanna test this out? Make a new notepad file on Windows, title it as "firsthtml.html", and create another file called "firstcss.css".

Place this in the .HTML file: <!DOCTYPE html>

<html>

<head>

<title> First HTML </title> <link rel="icon" type="image/x-icon" href="https://i.pinimg.com/736x/1a/8d/9d/1a8d9d26cdca15285d217c817f6953ec.jpg">

</head>

<body> <h1>Welcome, traveler!!</h1>

<h3><I>Thank you for reading the tutorial!! Follow the blog to keep up with our news.</I><h3>

</body>

</html>

Now, for your .css file, write this down:

h1 {

color: dark blue;

}

h3 {

color: orange;

}

Thank you so much for following this tutorial. I mainly learned about this from w3schools and in my school course. Happy coding!!! :>

-ava

#.io #ava #ava our realities #io our realities #eps foundation #entertainment productions studio #project our realities #our realities #coding #html #HTML stuff #css #Css stuff #hyper text markup language #cascading style sheets #there will be more coding to come #I hope this helps you guys get into coding

3 notes · View notes